<template>
  <div style="margin: 20px">
    <!--  Tab标签页  -->
    <div>
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="告警设置" name="rule">
          <div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                border-bottom: 1px solid #ccc;
                padding-bottom: 5px;
                margin-bottom: 10px;
                font-weight: 700;
              "
            >
              <div>
                <span>基础信息</span>
              </div>
              <div class="top-button">
                <el-button size="mini" @click="headSave()" v-if="type != 'view'"
                >保存</el-button
                >
                <el-button size="mini" @click="headCancel()">取消</el-button>
              </div>
            </div>
            <el-form
              :rules="rules"
              ref="ruleForm"
              :inline="true"
              :model="dataForm"
              :hide-required-asterisk="true"
              class="product-form"
            >
              <el-row style="margin: 0 45px">
                <el-col :span="8">
                  <el-form-item label="告警名称:" prop="warningName">
                    <el-input
                      v-model="dataForm.warningName"
                      size="small"
                      style="width: 100%"
                      :disabled="type == 'view'"
                      placeholder="请输入告警名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="优先级:" prop="priority">
                    <el-select
                      v-model="dataForm.priority"
                      style="width: 100%"
                      size="small"
                      :disabled="type == 'view'"
                      placeholder="请选择优先级"
                    >
                      <el-option
                        v-for="item in priorityDict"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value * 1"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  font-size: 16px;
                  border-bottom: 1px solid #ccc;
                  padding-bottom: 5px;
                  margin-bottom: 24px;
                  font-weight: 700;
                "
              >
                <div>
                  <span>告警条件</span>
                </div>
                <div class="top-button">
                  <el-button
                    size="mini"
                    @click="warningClear()"
                    v-if="type != 'view'"
                  >清空</el-button
                  >
                </div>
              </div>
              <el-row class="conditionBox" disabled="type == 'view'">
                <el-tag>当</el-tag>
                <el-tag
                  :type="equipment.equipmentName == '' ? 'info' : 'success'"
                  :effect="equipment.equipmentName == '' ? 'plain' : 'light'"
                  :closable="(equipment.equipmentName == '' ? false : true) && (type === 'view' ? false : true)"
                  class="inputBox"
                  @click="handleEquipment"
                  @close="closeEquipmentName"
                >{{ equipment.equipmentName || "请选择设备" }}</el-tag
                >
                <el-tag>的</el-tag>
                <el-tag
                  :type="point.pointName == '' ? 'info' : 'success'"
                  :effect="point.pointName == '' ? 'plain' : 'light'"
                  :closable="(point.pointName == '' ? false : true) && (type === 'view' ? false : true)"
                  class="inputBox"
                  @click="handlePoint"
                  @close="closePointName"
                >{{ point.pointName || "请选择点位" }}</el-tag
                >
              </el-row>
              <el-row
                class="conditionBox"
                style="margin-bottom: 12px"
                disabled="type == 'view'"
              >
                <el-tag>满足于</el-tag>
                <el-tag
                  :type="ruleExpression == '' ? 'info' : 'success'"
                  :effect="ruleExpression == '' ? 'plain' : 'light'"
                  :closable="(ruleExpression == '' ? false : true) && (type === 'view' ? false : true)"
                  class="inputBox"
                  @click="selectRule"
                  @close="closeExpression"
                >{{ ruleExpression || "请选择规则" }}</el-tag
                >
              </el-row>
            </el-form>
          </div>
          <div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                border-bottom: 1px solid #ccc;
                padding-bottom: 5px;
                font-weight: 700;
              "
            >
              <div>
                <span>执行动作</span>
              </div>
              <div class="top-button">
                <el-button
                  size="mini"
                  @click="handleAddAction"
                  v-if="type != 'view'"
                >新增</el-button
                >
                <el-button
                  size="mini"
                  @click="handleRomoveAction"
                  v-if="type != 'view'"
                >删除</el-button
                >
              </div>
            </div>
            <div style="margin-top: 10px">
              <el-table
                ref="productTable"
                border
                height="calc(100vh - 496px)"
                :data="actionData"
                @selection-change="handleSelectionChange"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  align="center"
                  width="60">
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="80"
                  :index="indexMethod"
                >
                </el-table-column>
                <el-table-column
                  label="动作名称"
                  align="center"
                  prop="actionName"
                >
                  <template v-slot="scope">
                    <el-tag>
                      {{ scope.row.actionName }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="outputWay"
                  label="动作类型"
                  align="center"
                  show-overflow-tooltip>
                  <template v-slot="scope">
                    <el-tag>
                      <dict-tag :type="DICT_TYPE.ACTION_OUTPUT_WAY" :value="scope.row.outputWay"></dict-tag>
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  v-if="type != 'view'"
                  align="center"
                  width="200">
                  <template slot-scope="scope">
                    <el-button v-if="isShow(scope.row)" @click="editConfig(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="rowDeleteAction(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="告警记录" v-if="type !== 'add' ? true : false" name="record">
          <div
            style="
              display: flex;
              justify-content: space-between;
              font-size: 16px;
              border-bottom: 1px solid #ccc;
              padding-bottom: 5px;
            "
          >
            <div>
              <span class="el-icon-share" style="margin-right: 15px"></span>
              <span @click="onLoad(page, {})">告警记录</span>
            </div>
          </div>
          <div style="margin-top: 10px">
            <div style="max-height: calc(100vh - 285px);height: calc(100vh - 285px); overflow: auto;">
              <el-row v-if="recordData.length" style="margin-top: 20px">
                <div class="warning-card">
                  <el-col :span="24" v-for="(item, index) in recordData" :key="index">
                    <el-card shadow="hover" :class="{'record-success': item.status == 1, 'record-danger': item.status == 0}" style="position: relative;font-size: 14px; padding-bottom: 10px; margin-right: 10px;margin-bottom: 10px;">
                      <div style="margin-bottom: 10px;">
                        <div style="padding: 20px 20px 5px 20px">
                          <div class="point-head" style="position: relative;font-size: 18px; font-weight: bold; margin-bottom: 10px;">
                            {{ item.configName }}
                          </div>
                          <div class="point-content" style="margin-bottom: 10px">
                            <div style="margin: 16px 6px 0 0px;">
                              <el-row>
                                <el-col :span="6">
                                  <span style="color: #646a73">设备名称：</span>
                                  <span style="color: #1677ff;">{{ item.equipmentName }}</span>
                                </el-col>
                                <el-col :span="6">
                                  <span style="color: #646a73">点位名称：</span>
                                  <span style="color: #1677ff;">{{ item.pointName }}</span>
                                </el-col>
                                <el-col :span="6">
                                  <span style="color: #646a73">告警时间：</span>
                                  <span style="color: #1677ff;">{{ parseTime(item.createTime) }}</span>
                                </el-col>
                              </el-row>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="item.status == 1" style="position:absolute; top: -10px; right: -15px;font-size: 100px;z-index: 0;">
                        <svg-icon icon-class="processed" class-name="processed-icon" style="position:absolute; top: 5px; right: 30px;margin-top: 10px;margin-left: 30px;text-align: center;" />
                      </div>
                      <div v-if="item.status == 0" style="position:absolute; top: -10px; right: -15px;font-size: 100px;z-index: 0;">
                        <svg-icon icon-class="untreated" class-name="untreated-icon" style="position:absolute; top: 5px; right: 30px;margin-top: 10px;margin-left: 30px;text-align: center;" />
                      </div>
                    </el-card>
                  </el-col>
                </div>
              </el-row>
            </div>

            <el-pagination
              background
              :current-page="recordPage.currentPage"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="recordPage.total"
              :page-size="recordPage.pageSize"
              :pager-count="5"
              @size-change="recordChangeSize"
              @current-change="recordChangeCurrent"
              style="float: right; margin: 20px 0"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <select-action-list ref="actionList" @saveAction="saveAction">
    </select-action-list>

    <select-equipment-list
      ref="equipmentList"
      @selectEquipment="selectEquipment"
    >
    </select-equipment-list>

    <select-point-list ref="pointList" @selectPoint="selectPoint">
    </select-point-list>

    <select-rule-list ref="ruleList" @ruleSelected="ruleSelected">
    </select-rule-list>

    <rule-condition ref="ruleCondition" @ruleCondition="ruleCondition">
    </rule-condition>


    <el-dialog
      title="消息配置"
      :visible.sync="dialogVisible"
      width="50%"
      >
      <el-form :model="message" label-width="100px"  @submit.native.prevent>
        <el-form-item label-width="120px" v-for="item in configData" :label="item.label+':'" :prop="item.prop">

          <el-row v-if="item.type=='input'">
            <el-col>
              <el-input  v-model="message[item.prop]" :disabled="type == 'view'||item.disabled" size="small" style="width: 100%" :placeholder="item.placeholder">
              </el-input>
            </el-col>
          </el-row>

          <el-row v-if="item.type=='select'">
            <el-col>
              <el-select @change="usersChange"  multiple  v-model="message[item.prop]" :disabled="type == 'view'||item.disabled" size="small" style="width: 100%" :placeholder="item.placeholder">
                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
              </el-select>
            </el-col>
          </el-row>
          <el-row v-if="item.type=='tag'">
            <!--   true  可以删除  false不可删除         -->
            <el-tag
              :key="tag"
              v-for="tag in message[item.prop]"
              style="font-size: 12px;line-height: 26px;height: 28px;"
              :closable="!(type=='view')"
              :disable-transitions="false"
              @close="handleClose(tag,item.prop)">
              {{tag}}
            </el-tag>

            <el-input
              class="input-new-tag"
              v-show="item.isShow"
              v-model="tagValueList[item.prop]"
              :ref="item.prop"
              size="small"
              @keyup.enter.native="handleInputConfirm(item.prop)"
              @blur="handleInputConfirm(item.prop)"
            >
            </el-input>
            <el-button v-if="!item.isShow" :disabled="type == 'view'" class="button-new-tag" size="small" @click="showInput(item.prop)">新增</el-button>


          </el-row>
          <el-row v-if="item.type=='editor'">
            <vue-editor
              ref="editor"

              :disabled="true"
              v-model="message[item.prop]"
              style="width: 99%;"
            ></vue-editor>
          </el-row>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveConfig">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import WarningRuleDialog from "@/views/warning/configuration/components/warningRuleDialog.vue";
import SelectActionList from "@/views/warning/configuration/components/selectActionList.vue";
import SelectEquipmentList from "@/views/warning/configuration/components/selectEquipmentList.vue";
import SelectPointList from "@/views/warning/configuration/components/selectPointList.vue";
import SelectRuleList from "@/views/warning/configuration/components/selectRuleList.vue";
import RuleCondition from "@/views/warning/configuration/components/ruleCondition.vue";
import {page as getPage} from "@/api/warning/warning-record";
import {detail, submit} from "@/api/warning/warning-api";
import {
  aliyunConfigData,
  mailConfigData,
  systemMessageData,
  tencentConfigData
} from '@/views/warning/action/messageData/messageConfigData'
import {listSimpleUsers} from '@/api/system/user'
import {VueEditor} from "vue2-editor";

export default {
  name: "add",
  components: {
    WarningRuleDialog,
    SelectActionList,
    SelectEquipmentList,
    SelectPointList,
    SelectRuleList,
    RuleCondition,
    VueEditor,
  },
  data() {
    return {
      tagValueList:{},
      inputValue:'',
      inputVisible:false,
      // 用户列表
      users: [],
      message:{
        users:''
      },
      configData:[],
      dialogVisible:false,
      equipmentShow: true,
      pointShow: true,
      actionDialog: false,
      tableLoading: false,
      equipment: {
        equipmentName: "",
        equipmentId: "",
        equipmentCode: "",
      }, // 选择的设备
      point: {
        pointName: "",
        pointCode: "",
        pointId: "",
      }, // 选择的点位
      selectionList: [], // 选择的数据
      actionData: [], // 动作列表
      recordData: [], // 记录列表
      ruleData: {}, // 记录列表
      ruleExpression: "", // 记录列表
      ruleOnly: false,
      pointOnly: false,
      activeTab: "rule",
      priorityDict: [],
      tabs: [
        {
          label: "规则配置",
          name: "rule",
        },
        {
          label: "告警记录",
          name: "record",
        },
      ],
      title: "告警新增",
      type: "add",
      dataForm: {
        warningRuleDO: {},
      },
      tableData: [],
      rules: {
        warningName: [
          {
            required: true,
            message: "请输入告警名称",
            trigger: "blur",
          },
        ],
        priority: [
          {
            required: true,
            message: "请选择优先级",
            trigger: "blur change" + "",
          },
        ],
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      recordPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
    };
  },
  created() {
    let { id, type } = this.$route.query;
    this.type = type;
    if (["edit"].includes(this.type)) {
      this.dataForm.id = id;
      this.title = "告警编辑";
      this.onLoad(this.page, {});
      this.initData();
    }
    if (["view"].includes(this.type)) {
      this.dataForm.id = id;
      this.readOnly = true;
      this.title = "告警查看";
      this.initData();
      this.onLoad(this.page, {})
    }
    const obj = Object.assign({}, this.$route, { title: this.title });
    this.$tab.updatePage(obj);

    // 获得用户列表
    listSimpleUsers().then(response => {
      this.users = response.data;
    })
  },
  mounted() {
    this.priorityDict = this.$store.state.dict.dictDatas.warning_priority;
    const type = this.$route.query.type;
    if (type === "add") {
      this.$tab.updatePage(
        Object.assign({}, this.$route, { title: "配置新增" })
      );
    } else if (type === "edit") {
      this.$tab.updatePage(
        Object.assign({}, this.$route, { title: "配置编辑" })
      );
    } else {
      this.$tab.updatePage(
        Object.assign({}, this.$route, { title: "配置查看" })
      );
    }
  },
  methods: {
    handleClose(tag,prop) {
      this.message[prop].splice(this.message[prop].indexOf(tag), 1);
    },

    showInput(prop) {
      for (let i = 0; i < this.configData.length; i++) {
        if (this.configData[i].prop==prop){
          this.$set(this.configData[i],'isShow',!this.configData[i].isShow)
          //初始化值
          this.$set(this.tagValueList,prop,'')

        }
      }

      //this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs[prop][0].$refs.input.focus();
      });
    },

    handleInputConfirm(prop) {
      if (!this.message[prop] || this.message[prop]==""){
        this.message[prop]=[]
      }


      if (this.tagValueList[prop]!=="") {

        this.message[prop].push(this.tagValueList[prop]);
      }
      for (let i = 0; i < this.configData.length; i++) {
        if (this.configData[i].prop==prop){
          this.$set(this.configData[i],'isShow',false)

        }
      }
      this.tagValueList[prop] = '';
    },

    usersChange(val){
    },


    isShow(row){
      let arr = ['MQTT','HTTP']
      return  arr.indexOf(row.outputWay)<0
    },

    saveConfig(){
      this.actionData.map(item=>{
        if (item.id==this.message.id){
          let relatedParameter = JSON.parse(item.relatedParameter)

          this.setConfigDataReverse(relatedParameter)
          item.relatedParameter=JSON.stringify(relatedParameter)
        }
      })
      this.dialogVisible=false
    },
    setConfigDataReverse(relatedParameter){
      if (this.configData.length>0){
        for (let i = 0; i < this.configData.length; i++) {
          relatedParameter[this.configData[i].prop]=this.message[this.configData[i].prop]
        }

      }

    },
    //从dataForm中获取配置参数 构建并设置 relatedParameter 到 dataForm

    getConfigData(channelType,relatedParameter){
      switch (channelType) {
        case 0 :{
          return systemMessageData
        }
        default :
          return []
      }
    },
    setConfigData(relatedParameter){
      if (this.configData.length>0){
        for (let i = 0; i < this.configData.length; i++) {
          //设置响应式  set  get
          if (!relatedParameter[this.configData[i].prop]){
            this.$set(this.message,this.configData[i].prop,"")
            //this.message[this.configData[i].prop] = ""
          }else {
            this.$set(this.message,this.configData[i].prop,relatedParameter[this.configData[i].prop])
            //this.message[this.configData[i].prop] = relatedParameter[this.configData[i].prop]
          }
        }

      }
    },
    editConfig(row){
      let relatedParameter = JSON.parse(row.relatedParameter)
      this.configData = this.getConfigData(Number(!row.outputWay?row.actionType:row.outputWay),relatedParameter)
      this.setConfigData(relatedParameter)
      //this.message.users=relatedParameter.users
      this.message.id=row.id
      //初始化tag输入框值
      this.inputVisible=false
      this.dialogVisible=true
    },
    restOnLoad() {
      this.onLoad(this.page, {});
    },
    actionLog(row) {
      this.$refs.actionLog.init(row)
    },
    warningLog(row) {
      this.$refs.warningLog.init(row);
    },
    // 点击处理日志按钮
    handleLog(row) {
      this.$refs.recordLog.init(row);
    },
    handle(row) {
      this.$refs.recordStatus.init(row);
    },
    initData() {
      detail(this.dataForm.id).then((res) => {
        this.dataForm = res.data;
        this.actionData=res.data.actionDOList
        this.ruleOnly = true;
        this.ruleExpression = res.data.ruleExpression;
        this.equipment.equipmentCode = res.data.equipmentCode;
        this.equipment.equipmentName = res.data.equipmentName;
        this.point.pointCode = res.data.pointCode;
        this.point.pointName = res.data.pointName;
        this.equipmentShow = false;
        this.pointShow = false;
        this.ruleData = {
          ruleExpression: this.dataForm.ruleExpression,
          processingType: this.dataForm.processingType,
          ruleThreshold: this.dataForm.ruleThreshold,
          conditionType: this.dataForm.ruleCondition,
          computeType: this.dataForm.computeType,
          timeType: this.dataForm.timeType,
          timeValue: this.dataForm.timeValue,
          id: this.dataForm.ruleCode,
        }
      });
    },
    warningClear() {
      this.equipment = {};
      this.point = {};
      this.ruleData = {};
      this.pointOnly = false;
      this.pointShow = true;
      this.pointShow = true;
      this.equipmentShow = true;
      this.ruleOnly = false;
    },
    ruleCondition(data) {
      this.ruleExpression = data.ruleExpression;
      this.ruleData = data;
    },
    // 选择规则后，更改参数
    updateRule() {
      if (this.type != "view") {
        this.dataForm.pointName = this.point.pointName;
        this.$refs.ruleCondition.init(this.dataForm, this.ruleData);
      }
    },
    // 选择规则 - 赋值
    ruleSelected(row) {
      this.ruleExpression = row.ruleExpression
      this.ruleData = row;
      this.ruleOnly = true;
    },
    // 点击选择规则
    selectRule() {
      if (this.ruleExpression != "") {
        this.updateRule();
      }
      if (this.ruleExpression == "" && this.type != "view") {
        if (this.point.pointName != "") {
          this.$refs.ruleList.init(this.point.dataType);
        } else {
          this.$message.warning("请先选择点位");
        }
      }
    },
    closeExpression() {
      this.ruleExpression = "";
    },
    headCancel() {
      this.$router.back();
    },
    headSave() {
      if (
        !this.equipment.equipmentCode ||
        !this.point.pointCode ||
        !this.ruleExpression
      ) {
        this.$message.warning("请先完成配置再进行操作！");
      } else {
        this.dataForm.warningRuleDO = {
          ruleCondition: this.ruleData.conditionType,
          ruleExpression: this.ruleData.ruleExpression,
          processingType: this.ruleData.processingType,
          ruleThreshold: this.ruleData.ruleThreshold,
          conditionType: this.ruleData.conditionType,
          computeType: this.ruleData.computeType,
          timeType: this.ruleData.timeType,
          timeValue: this.ruleData.timeValue,
          id: this.ruleData.id,
        };
        this.dataForm.actionDOList = this.actionData;
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.$loading();
            submit(this.dataForm)
              .then((res) => {
                this.$message.success("操作成功");
                this.type = "view";
                this.dataForm = res.data;
              })
              .finally(() => {
                this.$loading().close();
              });
          }
        });
      }
    },
    // 选择点位
    selectPoint(row) {
      this.point = row;
      this.dataForm.pointId = row.id;
      this.dataForm.pointName = row.pointName;
      this.dataForm.pointCode = row.pointCode;
      this.dataForm.processingType = row.dataType;
      this.ruleData = {};
      this.ruleOnly = false;
    },
    // 选择设备
    selectEquipment(row) {
      this.equipment = row;
      this.dataForm.equipmentId = row.id;
      this.dataForm.equipmentName = row.equipmentName;
      this.dataForm.equipmentCode = row.equipmentCode;
      this.ruleData = {};
      this.ruleOnly = false;
    },
    handlePoint() {
      if (this.point.pointName == "" && this.type != "view") {
        if (this.equipment.equipmentName != "") {
          this.$refs.pointList.init(this.dataForm.equipmentId);
          this.pointOnly = true;
        } else {
          this.$message.warning("请先选择设备");
        }
      }
    },
    closePointName() {
      this.point.pointName = "";
      this.point.pointCode = "";
      this.point.pointId = "";
      this.ruleExpression = "";
    },
    // 新增设备
    handleEquipment() {
      if (this.equipment.equipmentName == "" && this.type != "view") {
        this.$refs.equipmentList.init();
      }
    },
    // 删除设备
    closeEquipmentName() {
      this.equipment.equipmentName = "";
      this.equipment.equipmentCode = "";
      this.equipment.equipmentId = "";
      this.point.pointName = "";
      this.point.pointCode = "";
      this.point.pointId = "";
      this.ruleExpression = "";
    },
    handleSelectionChange(selection) {
      this.selectionList = selection;
    },
    // 保存动作类型
    saveAction(list) {
      list.forEach(item => {
        item.actionId = item.id
      })
      this.actionData = list;
      this.actionDialog = false;
    },
    rowDeleteAction(row) {
      this.$confirm("确定将选择数据删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.actionData = this.actionData.filter(
          (item) => !row.id.includes(item.id)
        )
      })

    },
    // 批量逻辑删除 执行动作
    handleRomoveAction() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      // 批量删除选择的执行动作
      this.$confirm("确定将选择数据删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let selectId = [];
        this.selectionList.forEach((item) => {
          selectId.push(item.id);
        });
        this.actionData = this.actionData.filter(
          (item) => !selectId.includes(item.id)
        );
      });
    },
    // 新增执行动作
    handleAddAction() {
      // 点击出现动作列表页
      this.$refs.actionList.init(this.actionData);
    },
    // 点击切换 TAB
    handleTabClick() {
    },
    indexMethod(index) {
      return index + 1;
    },
    recordChangeCurrent(val) {
      this.recordPage.currentPage = val;
      this.onLoad(this.page, {});
    },
    recordChangeSize(val) {
      this.recordPage.pageSize = val;
      this.onLoad(this.page, {});
    },
    // 告警记录分页查询
    onLoad(page, params = {}) {
      this.recordPage = page;
      this.tableLoading = true;
      params.configId = this.dataForm.id;
      getPage(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.formInline)
      ).then((res) => {
        const data = res.data;
        this.recordPage.total = data.total;
        this.recordData = data.records;
        this.tableLoading = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.record-button ::v-deep .el-button {
  width: 95%;
}

.warning-card ::v-deep .el-card__body {
  padding: 0 !important;
}

.warning-card ::v-deep .el-divider--horizontal {
  margin: 0;
}

.record-danger {
  background: linear-gradient(40deg, #fff, #fef0f0, #fde2e2);
}

.record-success {
  background: linear-gradient(40deg, #fff, #f0f9ed, #c2e7af);
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 140px;
  margin-left: 10px;
  vertical-align: bottom;
}

.text-hover:hover {
  color: #1890ff;
  cursor: pointer;
}

.top-button ::v-deep .el-button + .el-button {
  margin-left: 0;
}

.product-form ::v-deep .el-form-item {
  width: 100%;
}

.product-form ::v-deep .el-form-item__content {
  width: calc(100% - 100px);
}

.product-form ::v-deep .el-form-item__label {
  color: #3f4448;
  font-weight: 400;
}

.inputBox {
  margin: 0 12px;
  cursor: pointer;
}

.conditionBox {
  margin: 0 45px;
  height: 50px;
}

.el-tag {
  height: 36px;
  line-height: 34px;
  font-size: 16px;
  padding: 0 14px;
}
</style>
